import React from 'react';
import Utils from './../../utils/utils';
import { Input, Select, Form, Button, Checkbox, Radio,DatePicker} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
class FilterFrom extends React.Component{

    handleFilterSubmit = () => {
        let fieldsValue = this.props.form.getFieldsValue();
        this.props.filterSubmit(fieldsValue)
    }
    reset = () => {
        this.props.form.resetFields();
    }
    initFormList = () => {
        //getFieldDecorator双向数据绑定功能
        const { getFieldDecorator} = this.props.form
        //formList
        const formList = this.props.formList;
        const formItemList = [];
        if(formList && formList.length > 0) {
            formList.forEach((item,i) => {
                let label = item.label;
                let field = item.field;
                let initialVlaue = item.initialVlaue || "";
                let placeholder = item.placeholder;
                let width = item.width;
                if(item.type == "城市") {
                    const city = <FormItem 
                    label="城市"
                    key={field}
                    >
                        {
                             getFieldDecorator('city',{
                                 initialValue:"0"
                             })(
                             <Select placeholder={placeholder} style={{width:80}}>
                             {
                                 Utils.getOptionList([{id:"0",name:"全部"},{id:"1",name:"北京"},{id:"2",name:"哈尔滨"},{id:"3",name:"宾县"}])
                             }
                           </Select>
                             )
                        }
                    </FormItem>
                     formItemList.push(city)
                    
                }
                else if(item.type=="UserName") {
                    const admin_user = <FormItem
                            label="用户名"
                            key={field}
                    >
                            {
                                getFieldDecorator("username")(
                                    <Input type="text" placeholder="请输入用户名"></Input>
                                )
                            }
                    </FormItem>
                    formItemList.push(admin_user)
                }
                else if(item.type=="Pwd") {
                    const admin_pwd = <FormItem
                    label="密码"
                    key={field}
                    >
                            {
                                getFieldDecorator("pwd")(
                                    <Input  placeholder="请输入用密码"></Input>
                                )
                            }
                    </FormItem>
                    formItemList.push(admin_pwd)
                }
                else if(item.type == "时间查询") {
                    const begin_time = <FormItem 
                    label="订单时间"
                    key={field}
                    >
                        {
                            //field是一个变量  []可以把它当作变量
                            getFieldDecorator('begin_time',{
                                initialVlaue:initialVlaue
                            })(
                               <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder={placeholder}/>
                            )
                        }
                    </FormItem>
                     formItemList.push(begin_time)
                     const end_time = <FormItem 
                     label="~"
                     colon={false}
                     key={field}
                     >
                         {
                             //field是一个变量  []可以把它当作变量
                             getFieldDecorator('end_time')(
                                <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder={placeholder}/>
                             )
                         }
                     </FormItem>
                      formItemList.push(end_time)
                }
                else if(item.type == "INPUT") { 
                    const INPUT = <FormItem 
                    label={label}
                    key={field}
                    >
                        {
                            //field是一个变量  []可以把它当作变量
                            getFieldDecorator([field],{
                                initialVlaue:initialVlaue
                            })(
                               <Input type="text" placeholder={placeholder}/>
                            )
                        }
                    </FormItem>
                     formItemList.push(INPUT)
                } else if(item.type == "SELECT") {
                    const SELECT = <FormItem 
                    label={label}
                    key={field}
                    >
                        {
                            //field是一个变量  []可以把它当作变量
                            getFieldDecorator([field],{
                                initialVlaue:initialVlaue
                            })(
                                <Select placeholder={placeholder} style={{width:width}}>
                                  {
                                      Utils.getOptionList(item.list)
                                  }
                                </Select>
                            )
                        }
                    </FormItem>
                     formItemList.push(SELECT)
                }else if(item.type == "ONE") {
                    const ONE = <FormItem 
                    label={label}
                    key={field}
                    >
                        {
                            //field是一个变量  []可以把它当作变量
                            getFieldDecorator([field],{
                                initialVlaue:initialVlaue
                            })(
                                <Select placeholder={placeholder} style={{width:width}}>
                                  {
                                      Utils.getOptionList(item.list)
                                  }
                                </Select>
                            )
                        }
                    </FormItem>
                     formItemList.push(ONE)
                } 
                else if(item.type == "CHECHBOX") {
                    const CHECHBOX = <FormItem 
                    label={label}
                    key={field}
                    >
                        {
                            //field是一个变量  []可以把它当作变量
                            getFieldDecorator([field],{
                                valuePropName:"checked",
                                //Checkbox只能有true和false
                                initialVlaue:initialVlaue
                            })(
                                <Checkbox >
                                    {label}
                                </Checkbox>
                            )
                           
                        }
                    </FormItem>
                    formItemList.push(CHECHBOX)
                }
                else if(item.type == "DATEPICKER") {
                    const DATEPICKER = <FormItem 
                    label={label}
                    key={field}
                    >
                        {
                             //field是一个变量  []可以把它当作变量
                             getFieldDecorator([field])(
                                <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime={true} placeholder={placeholder}/>
                             )
                         }
                    </FormItem>
                    formItemList.push(DATEPICKER)
                }
            })
        }
        return formItemList;
    }
    render() {
        return (
            <Form layout="inline">
                {this.initFormList()}
                <Button type="primary" style={{margin:'0 20px'}} onClick={this.handleFilterSubmit}> 查询</Button>
                    <Button  onClick={this.reset}>重置</Button>
            </Form>
        )
    }
}
//通过antd框架里面自带的 Form.create帮助我们去创建表单
//Form.create创建表单可以实现数据的双向绑定
export default Form.create({})(FilterFrom);